<template>
  <cube-page type="button-view" title="业务员沟通" @rightBtnClick="zfilterDrawer" :rightBtn="true">
    <div slot="content">
      <div class="scroll-list-wrap" :style="{'height': getlistHeight}">
        <cube-scroll ref="scroll" :data="tableData" :options="options" @pulling-down="onPullingDown" @pulling-up="onPullingUp">
          <div class="zcardWrap">
            <div class="zcard" v-for="(v, index) in tableData" :key="index" :class="'zcard_'+v.type">
              <div class="zui-flex zcardRow">
                <div class="zlabel">主题名称</div>
                <div class="zdes">{{v.name}}</div>
              </div>
              <div class="zui-flex zcardRow">
                <div class="zlabel">发布部门</div>
                <div class="zdes">{{v.dept}}</div>
              </div>
              <div class="zui-flex zcardRow">
                <div class="zlabel">讨论分类</div>
                <div class="zdes">{{v.category}}</div>
              </div>
              <div class="zui-flex zcardRow">
                <div class="zlabel">发布时间</div>
                <div class="zdes">{{v.sdate}}</div>
              </div>
              <div class="zui-flex zcardRow">
                <div class="zlabel">完成时间</div>
                <div class="zdes">{{v.donedate}}</div>
              </div>
              <div class="zui-flex zcardRow">
                <div class="zlabel">状态</div>
                <div class="zdes">
                  <!-- <div v-html="retNewStatus(v, 1)"></div> -->
                  <span v-if="v.status == 0" class="zui_cancel">已取消</span>
                  <span v-if="v.status == 1" class="zui_undo">未签收</span>
                  <span v-if="v.status == 2" class="zui_new">签收</span>
                  <span v-if="v.status == 3" class="zui_begin">开始</span>
                  <span v-if="v.status == 4" class="zui_doing">进行中</span>
                  <span v-if="v.status == 5" class="zui_done">已完成</span>
                </div>
              </div>
              <div class="zui-flex zcardRow">
                <div class="zlabel">级别</div>
                <div class="zdes">{{retNewLevel(v.level)}}</div>
              </div>
              <div class="zui-flex zcardRow">
                <div class="zlabel">最近一次处理状态</div>
                <div class="zdes">
                  <span v-if="v.lastStatus == 0" class="zui_cancel">已取消</span>
                  <span v-if="v.lastStatus == 1" class="zui_undo">未签收</span>
                  <span v-if="v.lastStatus == 2" class="zui_new">签收</span>
                  <span v-if="v.lastStatus == 3" class="zui_begin">开始</span>
                  <span v-if="v.lastStatus == 4" class="zui_doing">进行中</span>
                  <span v-if="v.lastStatus == 5" class="zui_done">已完成</span>
                </div>
              </div>
              <div class="zui-flex zcardRow zcardBtns" v-if="v.status != 5 && v.status != 0">
                <cube-button class="zbtn" @click="zfavorites(v)">取消</cube-button>
                <cube-button :primary="true" class="zbtn zuiReplayBtn" @click="showZuiPop(v)">处理</cube-button>
              </div>
            </div>
          </div>
        </cube-scroll>
      </div>

      <drawer :show="drawerShow" @change-show="changeDrawerShow" @on-hide="onHide" @on-show="onShow">
        <div class="zuiDrawerWrap" slot="drawer">
          <div class="zrow">
            <div class="zlabel">发布时间</div>
            <div class="zdes">
              <div class="zdatepicker" @click="showDatePicker">
                {{searchOut.date}}
                <i class="cubeic-wrong" v-show="searchOut.date" @click.stop.prevnet="searchOut.date=''"></i>
              </div>
            </div>
          </div>
          <div class="zrow">
            <div class="zlabel">状态</div>
            <div class="zdes">
              <cube-select class="zselect" v-model="searchOut.status" :options="statusListAll" placeholder="请选择状态">
              </cube-select>
            </div>
          </div>
          <div class="zrow">
            <div class="zlabel">级别</div>
            <div class="zdes">
              <cube-select class="zselect" v-model="searchOut.level" :options="levelAll" placeholder="请选择级别">
              </cube-select>
            </div>
          </div>
          <div class="zui-flex btn-area">
            <cube-button class="zbtn J_reset" @click="zreset">重置</cube-button>
            <cube-button class="zbtn J_sub" @click="zsubmit">提交</cube-button>
          </div>

        </div>
      </drawer>

      <vue-fab v-show="$route.name == 'Communicate'" @clickMainBtn="zreplay"></vue-fab>

      <cube-popup type="zuipopup" ref="zuipopup">
        <div class="zpopupWrap uni-tip">
          <div class="uni-tip-title">汇仁采销联动</div>
          <div class="uni-tip-subtit"></div>
          <div class="uni-tip-content">
            <div class="zform">
              <div class="zrow">
                <div class="zlabel">处理状态：</div>
                <div class="zdes">
                  <cube-select class="zselect" v-model="zform.status" :options="statusList" placeholder="请选择处理类型">
                  </cube-select>
                </div>
              </div>
              <div class="zrow ztextareaWrap">
                <div class="zlabel">备注：</div>
                <div class="zdes">
                  <cube-textarea class="ztextarea" v-model="zform.remark" placeholder="请输入备注" :maxlength="200" :autoExpand="true"></cube-textarea>
                </div>
              </div>
            </div>
          </div>
          <div class="uni-tip-group-button">
            <div class="uni-tip-button" @click="hidezpop">取消</div>
            <div class="uni-tip-button" @click="surezpop">确定</div>
          </div>
        </div>
      </cube-popup>

      <cube-view></cube-view>
    </div>
  </cube-page>
</template>

<script>
import {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} from 'vuex'

import BusFactory from 'vue-happy-bus';
import CubePage from '@/components/cube-page'
import CubeView from '@/components/cube-view'
import Drawer from '@/components/drawer'
import {zCommunicateList, zCommunicateSub, zCommunicateCancel} from '@/util/api';

export default {
  name: 'Communicate',
  components: {
    CubeView,
    CubePage,
    Drawer
  },
  computed: {
    ...mapState(['loginUserInfo']),
  },
  data () {
    return {
      bus: BusFactory(this),
      showLoading: true,
      tableData: [],
      total: 0,
      start: 1,
      pageSize: 5,
      pullDownRefreshThreshold: 60,
      pullDownRefreshStop: 40,
      options: {
        pullDownRefresh: {
          threshold: 60,
          txt: '正在刷新...'
        },
        pullUpLoad: {
          threshold: 60,
          txt: {
            more: '上拉加载更多',
            noMore: '没有更多数据了...'
          }
        },
        scrollbar: true,
        click: true,
        tap: true,
        taps: true,
      },
      getlistHeight: this.zutil.getlistHeight(44),
      searchOut: {
        level: '',
        status: '',
        date: '',
      },
      drawerShow: false,
      hospitalList: [],
      datePicker: null,
      statusList: [{value: '1', text: '未签收', zcls: 'zui_undo'}, {value: '2', text: '签收', zcls: 'zui_new'}, {value: '3', text: '开始', zcls: 'zui_begin'}, {value: '4', text: '进行中', zcls: 'zui_doing'}, {value: '5', text: '已完成', zcls: 'zui_done'} ],
      levelArr: ['一般', '紧急', '非常紧急'],
      zuiPopObj: null,
      curEditObj: null,
      triggerFocus_temp: false,
      zform: {
        id: '',
        status: '1',
        remark: ''
      },
      statusListAll: [{value: '', text: '全部'}, {value: '0', text: '已取消'}, {value: '1', text: '未签收'}, {value: '2', text: '签收'}, {value: '3', text: '开始'}, {value: '4', text: '进行中'}, {value: '5', text: '已完成'} ],
      levelAll: [{value: '', text: '全部'}, {value: '1', text: '一般'}, {value: '2', text: '紧急'}, {value: '3', text: '非常紧急'}],
    }
  },
  created () {

  },
  mounted() {

    this.bus.$on('refreshCommuni', (flag) => {
      if(flag){
        this.$refs.scroll.scrollTo(0,0);
        this.resetPage();
        this.fetchList();
      }
    })

    this.zuiPopObj = this.$refs['zuipopup'];
    this.fetchList();
  },
  watch: {

  },
  methods: {
    ...mapMutations(['setW_shortageData']),
    resetPage () {
      this.tableData = [];
      this.total = 0;
      this.start = 1;
    },
    onPullingDown() {
      // 下拉刷新
      this.resetPage();
      this.fetchList();
    },
    onPullingUp() {
      // 上拉加载更多
      if(this.total && this.tableData.length < this.total){
        this.fetchList();
      }else if(this.total && this.tableData.length == this.total){
        this.$refs.scroll.forceUpdate();
        return;
      }
    },
    searchData () {
      this.start = 1;
      this.fetchList();
    },
    async fetchList () {
      let tbl_param = {
        page: this.start,
        pagesize: this.pageSize
      }
      this.zutil.deepClone(tbl_param, this.searchOut);

      const zuiCubeLoading = this.$createToast({time: 0,txt: '正在加载中...'});
      zuiCubeLoading.show();
      let res = await zCommunicateList(tbl_param);
      res = this.zutil.formatAxiosData(res);
      zuiCubeLoading.hide();

      if(res.code == '0000'){
        if(res.data.list && res.data.list.length){
          this.tableData = this.tableData.concat(res.data.list);
          this.total = res.data.total;
          this.start++;
        }else{
          this.$refs.scroll.forceUpdate();
        }
      }else{
        this.$createToast({type: 'error', time: 2000, txt: res.message || "获取缺货信息列表失败！"}).show();
        this.$refs.scroll.forceUpdate();
      }
      // 如果微信确实无法触发点击事件，再放开这段代码
      // this.zutil.initBtnsClickEvent(this, '.zuiReplayBtn', this.zreplay);
    },
    zreplay (item) {
      this.$router.push("/communicate/add");
    },
    zfavorites (item) {
      this.$createDialog({
        type: 'confirm',
        icon: 'cubeic-warn',
        content: '是否取消该沟通？',
        onConfirm: () => {
          this.zfavoritesAdd(item);
        },
        onCancel: () => {}
      }).show()
    },
    async zfavoritesAdd (item) {
      const zuiCubeLoading = this.$createToast({time: 0,txt: '正在加载中...'});
      zuiCubeLoading.show();
      let res = await zCommunicateCancel({id: item.id});
      res = this.zutil.formatAxiosData(res);
      zuiCubeLoading.hide();
      if(res.code == '0000'){
        this.$createToast({type: 'correct', time: 2000, txt: res.message || "取消沟通成功"}).show();
        this.$set(item, 'status', 0);
        this.$set(item, 'lastStatus', 0);
      }else{
        this.$createToast({type: 'error', time: 2000, txt: res.message || "取消沟通失败！"}).show();
      }
    },
    zgofavorites () {
      this.$router.push("/shortage/favoritesList");
    },
    zfilterDrawer () {
      this.drawerShow = true;
    },
    drawerToggle () {
      this.drawerShow = !this.drawerShow;
    },
    onHide () {

    },
    changeDrawerShow (state) {
      // 在父页面点击mask关闭页面
      this.drawerShow = state;
    },
    onShow () {

    },
    zreset () {
      this.searchOut = {
        level: '',
        status: '',
        date: '',
      }
      if(this.datePicker)
        this.datePicker.$updateProps({value: new Date()});
    },
    zsubmit () {
      this.drawerShow = false;
      this.resetPage();
      this.searchData();
    },
    showDatePicker () {
      if (!this.datePicker) {
        this.datePicker = this.$createDatePicker({
          min: new Date(1949, 0, 1),
          max: new Date(),
          value: new Date(),
          onSelect: (date, selectedVal, selectedText) => {
            this.searchOut.date = this.moment(date).format('YYYY-MM-DD');
          }
        })
      }
      this.datePicker.show();
    },
    retNewStatus (item, type) {
      if(type == 1){
        let status = item.status;
        let _item = this.statusList.find(v=>{
          return v.value == status;
        })
        return `<span class="${_item.zcls}">${_item.text}</span>`;
      }
    },
    retNewLevel (val) {
      return this.levelArr[parseInt(val, 10)];
    },
    hidezpop () {
      this.zform.id = '';
      this.zform.status = '1';
      this.zform.remark = '';
      this.zuiPopObj.hide();
      this.triggerFocus_temp = false;
    },
    async surezpop () {
      this.zform.id = this.curEditObj.id;
      const zuiCubeLoading = this.$createToast({time: 0,txt: '正在加载中...'});
      zuiCubeLoading.show();
      let res = await zCommunicateSub(this.zform);
      res = this.zutil.formatAxiosData(res);
      zuiCubeLoading.hide();
      if(res.code == '0000'){
        this.$createToast({type: 'correct', time: 2000, txt: res.message || "处理成功"}).show();

        this.$set(this.curEditObj, 'status', this.zform.status);
        this.$set(this.curEditObj, 'lastStatus', this.zform.status);
      }else{
        this.$createToast({type: 'error', time: 2000, txt: res.message || "处理失败！"}).show();
      }
      this.hidezpop();
    },
    showZuiPop (item) {
      this.curEditObj = item;
      this.zuiPopObj.show();
      this.triggerFocus_temp = true;
    }
  }
}
</script>

<style scoped lang="scss">

.fab-main-container {
  /deep/ {
    .fab-item-title {
      font-size: 14px;
      padding: 7px;
      background: #fc9153!important;
      color: #fff!important;
    }
  }
}

.zcardWrap {
  .zcard {
    .zcardRow .zlabel {
      width: 110px;
    }

    .zui_new {
      color: #ff0000!important;
    }
    .zui_undo {
      color: #be9a9a!important;
    }
    .zui_done {
      color: #28c488!important;
    }
    .zui_doing {
      color: #7328c4!important;
    }
    .zui_begin {
      color: #a07979!important;
    }
    .zui_cancel {
      color: #000!important;
    }
  }
}

.zform {
  .zrow {
    display: flex;
    height: 40px;
    line-height: 40px;
    align-items: center;
    margin-top: 10px;
    &:first-child {
      margin-top: 0;
    }
    .zlabel {
      width: 70px;
      color: #737275;
    }
    .zdes {
      flex: 1;
      word-break:keep-all;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      color: #000;
    }
    &.ztextareaWrap {
      height: auto;
      align-items: start;

      .ztextarea {
        height: 80px;
        border: 1px solid #eee;
      }
    }
  }
}

</style>
